<template>
  <div class="dynamic">
    <yg-background
      :imgStyle="{
        width: '100%',
        height: '368px',
        objectFit: 'cover',
      }"
      :imgSrc="require('@/assets/images/img_bg03.png')"
    >
      <template #default>
        <div class="yg_background_box">
          <div class="title">动态</div>
          <div class="content">我的私人朋友圈</div>
        </div>
      </template>
    </yg-background>
    <main class="main_box container">
      <!-- 左侧边栏 -->
      <aside class="aside_left hidden-xs">
        <yg-usercard />
        <yg-recommend class="visible-sm" style="margin-top: 12px" />
        <yg-tags class="visible-sm" style="margin-top: 12px" />
      </aside>
      <!-- 内容 -->
      <section class="main_content">
        <div
          :class="index === 0 ? 'item' : 'item border_top'"
          v-for="(item, index) in dynamicList"
          :key="item?.id"
        >
          <img :src="userInfo?.avatar" alt="" />
          <div class="info">
            <h3>{{ userInfo?.name }}</h3>
            <span>{{ item?.content }}</span>
            <div class="images">
              <div
                v-for="(img, index) in item?.images"
                :key="index"
                :class="
                  item?.images?.length > 1
                    ? 'images_item multiple'
                    : 'images_item'
                "
              >
                <!-- mobile -->
                <img
                  class="visible-xs"
                  :src="img"
                  alt=""
                  @click="ImagePreviewHandle(item?.images, index)"
                />
                <!-- pc -->
                <el-image
                  class="hidden-xs"
                  :src="img"
                  :preview-src-list="item?.images"
                  fit="cover"
                />
              </div>
            </div>
            <div class="details">
              <span>{{ $moment(item?.created_at).fromNow() }}</span>
              <div class="zan">
                <img
                  :src="require('@/assets/icons/icon_zan_20@3x.png')"
                  slt=""
                />
                <span>{{ item?.like_count }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- mobile分页 -->
        <div class="visible-xs">
          <div class="yg_pagination">
            <el-pagination
              small
              :current-page="1"
              :page-size="10"
              :total="100"
              :pager-count="5"
              layout="prev, pager, next"
              background
            >
            </el-pagination>
          </div>
        </div>
        <!-- pc分业 -->
        <div class="hidden-xs">
          <div class="yg_pagination">
            <el-pagination
              :current-page="1"
              :page-size="10"
              :total="100"
              :pager-count="5"
              layout="prev, pager, next, jumper"
              background
            >
            </el-pagination>
          </div>
        </div>
      </section>
      <!-- 右侧边栏 -->
      <aside class="aside_right hidden-xs hidden-sm">
        <yg-recommend />
        <yg-tags style="margin-top: 12px" />
      </aside>
    </main>
    <yg-footer />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { ImagePreview } from "vant";
import "vant/lib/image-preview/style";
export default {
  name: "Dynamic",
  data() {
    return {
      clientWidth: 0, // 页面宽度
      dynamicList: [
        {
          id: 5,
          content: "这是什么问题？",
          images: [
            require("@/assets/images/img_error01.png"),
            require("@/assets/images/img_error02.png"),
          ],
          created_at: "2022-12-27 10:50:26",
          like_count: 9,
        },
        {
          id: 4,
          content: "🎄圣诞快乐！",
          images: [require("@/assets/images/img_shengdan.png")],
          created_at: "2022-12-25 09:30:26",
          like_count: 99,
        },
        {
          id: 3,
          content: "这是一条没有图片的动态信息",
          images: [],
          created_at: "2022-12-21 10:38:26",
          like_count: 23,
        },
        {
          id: 2,
          content: "这是一条动态信息",
          images: [
            require("@/assets/images/img_cover01.png"),
            require("@/assets/images/img_cover02.png"),
            require("@/assets/images/img_cover03.png"),
            require("@/assets/images/img_cover04.png"),
            require("@/assets/images/img_cover05.png"),
            require("@/assets/images/img_cover04.png"),
            require("@/assets/images/img_cover03.png"),
            require("@/assets/images/img_cover02.png"),
            require("@/assets/images/img_cover01.png"),
          ],
          created_at: "2022-12-20 18:38:26",
          like_count: 23,
        },
        {
          id: 1,
          content: "感冒难受的一批！",
          images: [require("@/assets/images/img_touxiang.png")],
          created_at: "2022-12-19 15:38:26",
          like_count: 56,
        },
      ],
    };
  },
  created() {
    this.clientWidth = document.documentElement.clientWidth; // 初始化页面宽度 clientWidth
  },
  mounted() {
    this.pageWidthChange(); // 浏览器宽度变化
  },
  computed: {
    ...mapState("User", ["userInfo"]),
  },
  methods: {
    pageWidthChange() {
      // 浏览器宽度变化
      window.onresize = () => {
        return (() => {
          this.clientWidth = document.documentElement.clientWidth;
        })();
      };
    },
    ImagePreviewHandle(images, index) {
      if (this.clientWidth < 760) {
        // mobile
        ImagePreview({
          images,
          startPosition: index,
          closeable: true,
          showIndex: false,
          showIndicators: true,
          loop: false,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dynamic {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9f9f9;
  & > .main_box {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 16px 0;
    min-width: 320px;
    & > .aside_left,
    & > .aside_right {
      display: flex;
      flex-direction: column;
      min-width: 220px;
      max-width: 220px;
    }
    & > .main_content {
      display: flex;
      flex-direction: column;
      margin: 0 12px;
      width: 100%;
      border-radius: 4px;
      overflow: hidden;
      & > .item {
        display: flex;
        flex-direction: row;
        padding: 12px 16px;
        background-color: #fff;
        cursor: default;
        &.border_top {
          border-top: 1px solid #eaeaea;
        }
        & > img {
          min-width: 48px;
          width: 48px;
          height: 48px;
          border-radius: 4px;
        }
        & > .info {
          display: flex;
          flex-direction: column;
          margin-left: 12px;
          width: 100%;
          & > h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 500;
            color: rgb(66, 88, 144);
            line-height: 26px;
            user-select: none;
          }
          & > span {
            font-size: 16px;
            font-weight: 400;
            color: #171717;
            line-height: 24px;
            text-align: justify;
            word-break: break-all;
          }
          & > .images {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-top: 8px;
            width: 100%;
            & > .images_item {
              position: relative;
              width: 100%;
              & > img {
                width: 100%;
                object-fit: cover;
              }
              & > .el-image {
                width: 100%;
              }
              &.multiple {
                padding-bottom: 33.3333%;
                width: 33.3333%;
                & > img {
                  position: absolute;
                  padding: 1px;
                  height: 100%;
                  object-fit: cover;
                }
                & > .el-image {
                  position: absolute;
                  padding: 1px;
                  height: 100%;
                }
              }
            }
          }
          & > .details {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            & > span {
              font-size: 14px;
              font-weight: 400;
              color: #999;
              line-height: 22px;
              user-select: none;
            }
            & > .zan {
              display: flex;
              flex-direction: row;
              align-items: center;
              user-select: none;
              cursor: pointer;
              & > img {
                min-width: 20px;
                width: 20px;
                height: 20px;
              }
              & > span {
                margin-left: 2px;
                font-size: 14px;
                font-weight: 400;
                color: #999;
                line-height: 22px;
                &.active {
                  color: #d4237a;
                }
              }
            }
          }
        }
      }
      .yg_pagination {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100px;
      }
    }
  }
}
@media (max-width: 768px) {
  .main_box {
    margin: 0;
    padding: 0 !important;
    width: 100vw !important;
    & > .main_content {
      margin: 0 !important;
    }
  }
}
</style>
